<template>

    <div>

            <el-row :gutter="20">
                <el-col id="content_left" :span="14">
                    <div>
                        <el-input  v-model="customer.customerId" :readonly = true>
                            <template slot="prepend">客户编码</template>
                        </el-input>
                    </div>
                    <div class="viewclass">
                        <el-input  v-model="customer.customerName" :readonly = true >
                            <template slot="prepend">客户名称</template>
                            <template slot="append"><i class="iconfont icon-dashujukeshihuaico-"></i></template>
                        </el-input>
                    </div>
                    <div class="viewclass">
                        <el-input  v-model="customer.contact.length == 0? '--':customer.contact[0].contactName" :readonly = true>
                            <template slot="prepend">主联系人</template>
                            <template slot="append"><i class="iconfont icon-jiahao"></i></template>
                        </el-input>
                    </div>
                    <div  class="viewclass">
                        <el-input  v-model="customer.contact.length == 0?'--':customer.contact[0].contactTel"  :readonly = true>
                            <template slot="prepend">联系电话</template>
                            <template slot="append"><i class="iconfont icon-tel-s"></i></template>
                        </el-input>
                    </div>
                    <div  class="viewclass">
                        <el-input  v-model="customer.contact.length == 0?'--':customer.contact[0].contactPhone" :readonly = true>
                            <template slot="prepend">手机号码</template>
                            <template slot="append"><i class="iconfont icon-tel-s"></i></template>
                        </el-input>
                    </div>
                    <div class="viewclass">
                        <el-input  v-model="customer.emailAddress" :readonly = true>
                            <template slot="prepend">邮箱地址</template>
                        </el-input>
                    </div><div  class="viewclass">
                        <el-input  v-model="customer.cusType.customerType" :readonly = true>
                            <template slot="prepend">客户类型</template>
                        </el-input>
                        </div>
                    <div  class="viewclass">
                        <el-input  v-model="customer.cusSource == null?'--':customer.cusSource.customerSource" :readonly = true>
                            <template slot="prepend">客户来源</template>
                        </el-input>
                    </div>
                    <div  class="viewclass">
                        <el-input  v-model="proAndCity" :readonly = true>
                            <template slot="prepend">所在省市</template>
                        </el-input>
                    </div>
                 <!--   <div style="margin-top: 15px;">
                        <el-input  v-model="input10">
                            <template slot="prepend">信用等级</template>
                        </el-input>
                    </div>-->
                    <div  class="viewclass">
                        <el-input  v-model="customer.workAddress" :readonly = true>
                            <template slot="prepend">工作地址</template>
                            <template slot="append"><i class="iconfont icon-dizhi"></i></template>
                        </el-input>
                    </div>
                    <div class="viewclass">
                        <el-input  v-model="customer.creater.empName" :readonly = true>
                            <template slot="prepend">创建人员</template>
                        </el-input>
                    </div>
                    <div  class="viewclass">
                        <el-input  :value="customer.creatDate | formatDate" :readonly = true>
                            <template slot="prepend">创建时间</template>
                        </el-input>
                    </div>
                    <div  class="viewclass">
                        <el-input  v-model="customer.owner.empName" :readonly = true>
                            <template slot="prepend">归属人员</template>
                        </el-input>
                    </div>
                    <div  class="viewclass">
                        <el-input  :value="customer.allocateTime | formatDate" :readonly = true>

                            <template slot="prepend">分配日期</template>
                        </el-input>
                    </div>
                    <div  class="viewclass">
                        <el-input  :value="customer.fallDate | formatDate" :readonly = true>
                            <template slot="prepend">回落日期</template>
                        </el-input>
                    </div>
                </el-col>

                <el-col :span="10">
                    <div class="content_text"  >
                       <table>
                           <tr>
                               <td class="tdTab">
                                 <div class="tab tab1" @click="cusClick1()">客户跟进</div>
                                   <div class="tab tab2" @click="cusClick2()">联系人</div>
                                   <div class="tab tab3" @click="cusClick3()">客户问卷</div>
                                   <div class="tab tab4" @click="cusClick4()">行为分析</div>
                               </td>

                               <td class="tdTab2" style="width: 100%; padding: 10px 0px 0px 10px; border-top: solid 1px #eee; border-left: solid 1px #eee; vertical-align: top;">
                                  <!--客户跟进-->
                                   <el-form>
                                     <div class="moudle1" ref="moudle1">
                                       <el-form-item>
                                           <div class="acTyChoo">
                                                <el-select v-model="moveBehavior.actionType" value-key="actionTypeId" placeholder="请选择行动类型" >
                                                    <!--key是循环的标准，lable是渲染出的值，v-model拿到value中的值-->
                                                    <el-option  v-for="item in actiontype"  :key="item.actionTypeId"  :label="item.actionTypeName" :value="item"></el-option>
                                                </el-select>
                                            </div>
                                       </el-form-item>
                                       <el-form-item>
                                           <div class="acTyChoo">
                                               <el-select v-model="moveBehavior.contact" value-key="contactId" placeholder="请选择联系人" >
                                                   <el-option v-if="hisLinkMan == null" label="该客户还没有建立联系人"></el-option>
                                                   <!--key是循环的标准，lable是渲染出的值，v-model拿到value中的值-->
                                                   <el-option v-else  v-for="item in hisLinkMan"  :key="item.contactId"  :label="item.contactName" :value="item"></el-option>
                                               </el-select>
                                           </div>
                                       </el-form-item>
                                       <el-form-item style="height: 110px">
                                            <el-input type="textarea" :rows="4" placeholder="快速记录客户的行动内容" v-model="moveBehavior.actionDetail"> </el-input>
                                            <!--客户行为选择按钮-->
                                            <el-button class="record"  type="text"   @click="addAction()"><i class="iconfont icon-lianluojilu"></i></el-button>
                                       </el-form-item>
                                            <!--选择下次联系时间-->
                                       <el-form-item prop="nextdate">
                                            <div class="check-sty">
                                                   <el-checkbox v-model="isContac" @change="disContact" ></el-checkbox><span style="padding-left: 3px">暂不联系</span>
                                            </div>
                                               <div class="riqi-sty">
                                                   <el-date-picker  v-model="nextContacDate" placeholder="下次联系日期" :disabled="isdisabled" style="width: 130px;height: 42px"  type="date" value-format="yyyy-MM-dd" >
                                                   </el-date-picker>
                                               </div>

                                                   <el-time-picker v-model="nextContacHour" placeholder="下次联系时间" :disabled="isdisabled" value-format="hh:mm:ss" style="width: 130px">
                                                   </el-time-picker>

                                       </el-form-item>
                                           <el-button type="primary" style="margin-top: 15px" size="small" @click="addActionRecord">保存</el-button>
                                           <el-button type="primary" style="position: relative;left: 162px; " @click="saveDetailRecordDialogVisible=true"  size="small">添加详细的联系内容</el-button>
                                             <!--添加详细行动记录的表单-->
                                             <el-dialog title="行动记录" :visible.sync="saveDetailRecordDialogVisible" width="60%" :modal="false">
                                                 <add-actform></add-actform>
                                             </el-dialog>

                                            <!--客户行为选择弹出框-->
                                            <el-dialog  v-dialogDrag :modal="false" title="客户行为" :visible.sync="actionVisible"  width="35%" >
                                                <div style="margin-top: 10px">
                                                    <el-tag style="margin-top: 10px" v-for="item in cusBehavoirs" :key="item.behaviorId" @click="tagClick(item)">
                                                        {{item.behaviorName}}({{item.behaviorScore}})
                                                    </el-tag>
                                                </div>
                                                <span slot="footer" class="dialog-footer">
                                                  <el-button @click="actionVisible = false">取 消</el-button>
                                                  <el-button type="primary" @click="actionVisible = false">确 定</el-button>
                                                </span>
                                            </el-dialog>

                                           <!--卡片-->
                                         <div class="nochance notoucher" v-if="recordInCard.length == 0">
                                             <div class="alert">该客户尚未产生行动记录，您可以通过上面快捷方式进行行动记录的建立</div>
                                         </div>
                                           <div  class="bx" style="margin-top: 15px;border-top: 1px solid #e4e7ee" v-else    >
                                               <ul class="infinite-list"  v-infinite-scroll="load" style="overflow:auto">
                                                   <li class="infinite-list-item" v-for="(records,index) in recordInCard" :key="index">
                                                       <el-card class="box-card " >
                                                           <div slot="header" class="clearfix">
                                                               <el-avatar shape="circle" :size="size" src="./static/img/68e12daa-816f-4aa9-8910-52c5e598fc45.jpg"></el-avatar>
                                                               <span class="en">{{records.emp.empName}}</span>
                                                               <span class="time">{{records.actionDate | formatDate}}</span>
                                                           </div>
                                                           <div class="text item">
                                                               {{records.actionDetail}}
                                                           </div>
                                                           <!--操作按钮-->
                                                           <div class="cl-foot" style="margin-top: 10px">
                                                               <el-button style="float: right; padding: 10px 0" type="text">
                                                                   <span ><i class="iconfont icon-kehu" style="font-size: inherit;position: relative;left: -180px">{{records.contact.contactName}} </i></span>
                                                                   <i class="iconfont icon-zhiding"></i>
                                                                   <i class="iconfont icon-xiaoxi"></i>
                                                               </el-button>
                                                           </div>
                                                       </el-card>
                                                   </li>
                                               </ul>
                                           </div>

                                    </div>
                                   </el-form>
                                   <!--联系人-->

                                   <div class="notoucher" ref="moudle2" v-if="customer.contact.length ==0" style="display: none">
                                       <div class="alert">当前尚未添加客户的其他联系人，立刻添加新联系人</div>
                                   </div>
                                   <div class="moudle2" ref="moudle2" v-else>
                                       <el-row>
                                           <el-col v-for="linkMan in hisLinkMan" :key="linkMan.contactId">
                                               <!--卡片-->
                                               <el-card class="box-card" shadow="hover" >
                                                   <div slot="header" class="clearfix">
                                                       <el-avatar shape="square" :size="size" src="./static/img/female.png"></el-avatar>
                                                       <span class="en toucherName">{{linkMan.contactName}}</span>

                                                   </div>
                                                   <div class="text item">
                                                       <div>职位：<span>{{linkMan.position}}</span></div>
                                                       <div>电话：<span>{{linkMan.contactTel}}</span></div>
                                                       <div>手机：<span>{{linkMan.contactPhone}}</span></div>
                                                       <div>邮箱：<span>{{linkMan.emailAddress}}</span></div>
                                                       <div>类型：<span>{{linkMan.contactType == null? "--":linkMan.contactType.contactTypeName}}</span></div>
                                                   </div>
                                                   <!--操作按钮-->
                                                   <div class="cl-foot">
                                                       <el-button style="float: right; padding: 10px 3px" type="text">
                                                           <span><i class="iconfont icon-06" style="font-size: 14px">   </i></span>
                                                       </el-button>
                                                       <el-button style="float: right; padding: 10px 2px" type="text">
                                                           <span>  <i class="iconfont icon-chakan"></i> </span>
                                                       </el-button>

                                                   </div>
                                               </el-card>
                                           </el-col>
                                       </el-row>

                                   </div>
                                   <!--客户问卷-->
                                   <div class="moudle3" ref="moudle3" >
                                       <div class="nochance notoucher">
                                           <div class="alert">正在开发,敬请期待！！</div>
                                       </div>
                                   </div>
                                  <!-- 行为分析-->
                                   <div class="moudle4" ref="moudle4">
                                            <div class="bx actionanalyze">
                                               <div class="box-card acscore" style="color: whitesmoke">
                                                   <div class="acheader clearfix">
                                                       <i class="iconfont icon-mingpian"  style="font-size: 20px"></i>
                                                       <span>客户行为分值({{this.actionScores}})</span>
                                                   </div>
                                               </div>
                                            </div>
                                           <div class="nochance notoucher" v-if="hisFavorAct.length == 0">
                                               <div class="alert">暂未添加客户行为,您可在'客户跟进'选项卡中进行客户行为的快速添加。</div>
                                           </div>
                                           <el-collapse v-model="collapseActiveNames" v-else>
                                               <el-collapse-item  name="1">
                                                       <template slot="title">
                                                           <span class="favo">有利行为 Favorable</span>
                                                       </template>
                                                   <div>
                                                       <el-tag style="margin-top: 10px" v-for="item in hisFavorAct" >
                                                           {{item.behavior.behaviorName}}({{item.behavior.behaviorScore}})
                                                       </el-tag>
                                                   </div>
                                               </el-collapse-item>
                                               <el-collapse-item name="2">
                                                   <template slot="title">
                                                       <span class="favo">不利行为 Unfavorable</span>
                                                   </template>
                                                   <el-tag class="name2tag" style="margin-top: 10px" v-for="item in hisUnfavorAct">
                                                       {{item.behavior.behaviorName}}({{item.behavior.behaviorScore}})
                                                   </el-tag>
                                               </el-collapse-item>
                                           </el-collapse>
                                   </div>

                               </td>
                           </tr>
                       </table>
                    </div>
                </el-col>
            </el-row>
    </div>

</template>
<script>


        import {formatTimeToStr} from '@/assets/format.js'
        import AddActform from "../presale/add-actform";

    export default {
        name: "custInfor",
        components: {AddActform},
        props:['customer'],
        data:function () {
            return{
                actionVisible:false,
                saveDetailRecordDialogVisible:false,//添加详细内容
                size:"medium",
                textarea:'',//文本
                actiontype:'',//行动类别
                collapseActiveNames:1,//折叠面板
                hisLinkMan:{},//该客户所有联系人
                moveBehavior:{
                    isContact: 0,          //是否联系
                    actionDate:new Date(),
                    nextContactTime:'1997-01-01',
                    behaviorRecordList:[],//客户行为记录集合
                    contact:{               //联系人
                        contactName:''
                    },
                    customer:{},     //客户
                    emp:{}           // 业务员
                },//客户跟进时进行的行动记录数据
                recordInCard:[],//记录卡片
                behaviorRecord:{
                    actionRecord:this.moveBehavior,
                    actionDate:new Date(),
                    customer:{},
                    behavior:{}
                },
                cusBehavoirs:{},//所有客户行为标签
                choType:'info',//选择客户标签颜色
                nextContacDate:'',//下次联系日期
                nextContacHour:'',//下次联系时间
                isdisabled:false,//是否禁选时间
                isContac:false , //是否联系
                /*客户分析*/
                actionScores:0,//客户行为总分
                hisFavorAct:[],//该客户有利行为
                hisUnfavorAct:[],//该客户的不利行为
            }
        },
        methods:{
            cusClick1(){
                this.$refs.moudle1.style.display = 'block'
                this.$refs.moudle2.style.display = 'none'
                this.$refs.moudle3.style.display = 'none'
                this.$refs.moudle4.style.display = 'none'
            },
            cusClick2(){
                this.$refs.moudle1.style.display = 'none'
                this.$refs.moudle2.style.display = 'block'
                this.$refs.moudle3.style.display = 'none'
                this.$refs.moudle4.style.display = 'none'
            },
            cusClick3(){
                this.$refs.moudle1.style.display = 'none'
                this.$refs.moudle2.style.display = 'none'
                this.$refs.moudle3.style.display = 'block'
                this.$refs.moudle4.style.display = 'none'
            },
            cusClick4(){
                this.$refs.moudle1.style.display = 'none'
                this.$refs.moudle2.style.display = 'none'
                this.$refs.moudle3.style.display = 'none'
                this.$refs.moudle4.style.display = 'block'
            },
            //选择客户行为标签
            addAction(){
                this.actionVisible = true
            },
            //点击客户行为标签
            tagClick(behavior){
                this.behaviorRecord.behavior = behavior //一个客户行为记录中存入客户行为
                this.behaviorRecord.customer = this.customer
                this.moveBehavior.behaviorRecordList.push(this.behaviorRecord)//将一个客户行为记录对象放进集合
                this.behaviorRecord = {}
                if(this.moveBehavior.actionDetail != '' && this.moveBehavior.actionDetail != null){
                    this.moveBehavior.actionDetail = this.moveBehavior.actionDetail+';' + behavior.behaviorName;
                }else{
                    this.moveBehavior.actionDetail = behavior.behaviorName;
                }
            },

            //点击暂不联系
            disContact(){
                if(this.isContac == true){
                    this.isdisabled = true
                    this.nextContacDate = ''
                    this.nextContacHour = ''
                }else {
                    this.isdisabled = false
                }
            },
            //行动记录卡片渲染
            getCardActionRecord(customerId){
                this.$axios.get("api/customer/all_actionrec",{params:{"customerId":customerId}})
                    .then(v => {
                        this.recordInCard = v.data
                    }).catch()
            },
            //添加行动记录
            addActionRecord(){
                this.moveBehavior.emp = this.$store.state.user;
                this.moveBehavior.customer = this.customer
                if(this.nextContactTime != null && this.nextContactTime != ''){
                this.moveBehavior.nextContactTime =this.nextContactTime
                };
                if(this.isContac == false){
                    this.moveBehavior.isContact = 0
                }else {
                    this.moveBehavior.isContact = 1
                }
                console.log("this.moveBehavior");
                console.log(this.moveBehavior);
                console.log(this.customer);
                this.$axios.post("api/customer/add_actionRecord",this.moveBehavior)
                    .then(() => {
                        //清空表单
                        this.isContac = false
                        this.moveBehavior={
                            isContact: 0,
                            actionDate:new Date(),
                            nextContactTime:'1997-01-01',
                            behaviorRecordList:[],
                            contact:{
                                contactName:''
                            },
                            emp:{}
                        };
                        //刷新客户行为分析
                        this.getTotalAction(this.customer.customerId);
                        //刷新行动时间线

                    }).catch()
                setTimeout(()=>{this.getCardActionRecord(this.customer.customerId)},1000)
            },


           //查询行动类型
            get_actionType(){
                this.$axios.get("api/actrecord/getactType").then(v => {this.actiontype = v.data}).catch()
            },
            //查询该客户所有联系人
            get_hisContact(customerId){
                this.$axios.get("api/customer/hisLinkMan",{params:{"customerId":customerId}})
                    .then(v => {
                        this.hisLinkMan = v.data;
                    }).catch()
            },
            //查询所有客户行为标签
            get_cusLable(){
                this.$axios.get("api/customer/all_behaviors")
                    .then(v=>{
                        this.cusBehavoirs = v.data;
                    }).catch()
            },
            //查询该用户所有行为，和总的行为分数
            getTotalAction(customerId){
                this.$axios.get("api/customer/action_score",{params:{"customerId":customerId}})
                    .then(v => {
                     for(let action of v.data){
                         this.actionScores += action.behavior.behaviorScore
                         if(action.behavior.behaviorScore >= 0){//是有利行为
                             this.hisFavorAct.push(action)
                         }else{//是不利行为
                             this.hisUnfavorAct.push(action)
                         }
                     }
                    }).catch()
            },
            load() {

            },
        },
        computed:{
            proAndCity(){
                return this.customer.pro + this.customer.city;
            },
            nextContactTime(){//下次回访时间
                return new Date(this.nextContacDate +' '+ this.nextContacHour);
            }
        },
        filters: {
            formatDate : function (time) {
                if(time!=null&&time!="")
                {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd hh:mm");
                }else{
                    return "";
                }
            }
        },
        created() {
            this.get_actionType();
            this. get_hisContact(this.customer.customerId);
            this.getTotalAction(this.customer.customerId);
            this.get_cusLable();
            this.getCardActionRecord(this.customer.customerId);

        }
    }
</script>

<style scoped>
    .moudle1{
        display: block;
    }
    .moudle2,.moudle3,.moudle4{
        display: none;
    }
    /*联系人卡片中的样式*/
.el-form-item{
    margin: 0;
    height: auto;
}
    .el-form-item__content{
        height: auto;
    }
.moudle2 .box-card{
    margin: 0 0 15px 0;
}
   .moudle2 .el-card/deep/ .el-card__header{
       padding: 7px 20px;
       background:dodgerblue;
       color: #e4e7ee;
   }
    .clearfi .en{
        position: relative; top: -13px;left: 13px
    }
    .text div{
        margin-bottom: 5px;
    }
    /*----------------------------------------------------*/

    /*卡片中的样式*/
.el-card/deep/ .el-card__header{
    padding: 7px 20px;
}
.bx{
    width: 100%;
}
.bx .box-card{
    margin: 20px 0;
}
.bx ul{
    width: 110%;
    height: 470px;
}
    .clearfix .en{
        position: relative; top: -13px;left: 13px
    }
.box-card  .time {
    position: relative; left: 150px
}
.box-card {
    width: 360px;
    margin: 20px 20px;
}
.record{
    position: relative;top:-47px;right:-5px;
}
/*----------------------------------------------------*/
/*选择日期格式·*/
.check-sty{height:38px;background-color: rgb(247,247,247);border-radius: 4px;padding:0 7px 0 7px;border: 1px solid rgb(204,204,204);float: left}
.riqi-sty{float: left;margin-left: 5px}
    .el-input--prefix/deep/ .el-input__inner{
        width: 147px;
    }
/* 调整日期选择器格式*/
.el-input__prefix i{font-size: 0px}
.el-input--prefix .el-input__inner{padding-left: 5px !important;}
.acTyChoo{
    padding-bottom: 15px;
}
table tr{
    width: 100%;
}
.el-select /deep/.el-input {
    width:366px;
}

    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
    .iconfont{
        font-size: 18px;

    }
    table {
        border-spacing: 0;
        border-collapse: collapse;
        border-width: 0;

    }
    .tdTab {
        vertical-align: top;
        padding: 0px;
    }
.tdTab2{
    padding: 0px 10px 0px 10px;

}
    .tdTab .tab {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;

        text-align: center;
        padding: 15px 4px 15px 4px;
        width: 25px;
        font-size: 14px;
        color: white;
        cursor: pointer;
        margin-bottom: 1px;
    }
    .tdTab .tab1{
        background-color: #a1d46f;
    }
    .tdTab .tab1:hover{
        background-color: #8dc059;
    }
    .tdTab .tab2{
        background-color: #55c1e7;
    }
    .tdTab .tab2:hover{
        background-color: #43b0d9;
    }
    .tdTab .tab3{
        background-color: #f87058;
    }
    .tdTab .tab3:hover{
        background-color: #e65945;
    }
    .tdTab .tab4{
        background-color: #ac94ea;
    }
    .tdTab .tab4:hover{
        background-color: #967dd9;
    }
    .viewclass{
        margin-top: 15px;
        height: auto;

    }

    /*行为分析卡片样式*/
    .actionanalyze .acscore{
        background-color:#428bca;
        border-color: #428bca;
        width: auto;
        border-radius: 4px;
        overflow: hidden;
        color: #303133;
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }
    .acheader{
        border-bottom: 0px;
        font-size: 18px;
        padding: 20px 5px 20px 7px;
        text-align: center;
        box-sizing: border-box;
    }
    ul li{
        list-style: none;
    }

    .el-collapse-item/deep/.el-collapse-item__header{
        background-color: #DFF0D8;
        border-bottom: 1px solid #A9F0A1;

    }
    #el-collapse-head-5445{
        background-color: #3DFEFE!important;

    }

    .favo{
        padding-left: 10px;
        font-size: 14px;
        color: #3C763D;
        font-weight: bold;
    }
    .name2tag{
        background-color: #f2dede;
        color: #a94442;
    }
    .notoucher{ width:330px; height:60px;padding:0px; border: 1px solid transparent;}
    .notoucher .alert{ border-radius: 3px; width: 100%;height: 100%;  color: #31708f;padding: 20px 10px 10px 20px;
        background-color: #d9edf7;
        border-color: #bce8f1;}
    .nochance .alert{
        border-radius: 3px; width: 100%;height: 100%; padding: 20px 10px 10px 20px;color: #a94442;margin-top: 20px;
        background-color: #f2dede;
        line-height: 20px;
        border-color: #ebccd1;
    }

</style>